<template>
  <div class="fx-js-ct wd-fl ht-fl">
    <div class="fx-ct-ct fx-cl">
      <img class="wd-200" :src="errImgUrl" :alt="imAlt" />
      <span class="fw-600 ft-20 lh-28 mg-tp-8 font-ver">{{ title }}</span>
      <span class="mg-tp-8 fw-400 ft-16 lh-24 cr-bk-4 font-ver">{{ tip }}</span>
      <div class="common-btn-banner" v-if="isShowBtn">
        <span
          class="common-btn-wrap mg-tp-32"
          v-for="(item, idx) in btnList"
          :key="idx"
          :class="`${item.color}Status`"
          @click="btnClickHandle(item)"
          >{{ item.label }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "errorCom",
  props: {
    imAlt: {
      type: String,
    },
    errImgUrl: {
      type: String,
    },
    title: {
      type: String,
    },
    tip: {
      type: String,
    },
    btnList: {
      type: Array,
    },
  },
  computed: {
    isShowBtn() {
      return this.btnList && this.btnList.length > 0;
    },
  },
  methods: {
    btnClickHandle(btnObj) {
      if (!btnObj || btnObj.disabled) return;
      if (btnObj.isToLogin) return this.$router.replace({ path: "/login" });
      if (btnObj.isToIndex) return this.$router.replace({ path: "/" });
      this.$emit(btnObj.option, btnObj);
    },
  },
};
</script>

<style lang="scss" scoped>
.font-ver {
  vertical-align: top;
}
.common-btn-wrap {
  margin-left: 0;
}
</style>
